<template lang="html">
    <div class="select_box">
        <div class="container">
            <div @click="EquClick">
            {{leveltest}}<i class="el-icon-arrow-down"></i>
            </div>
            <div @click="PratClick">
            {{equipmenttest}}<i class="el-icon-arrow-down"></i>
            </div>
            <div @click="LevelClick">
            {{Parttest}}<i class="el-icon-arrow-down"></i>
            </div>
        </div>
        <p class="equipment" v-show="equipment"><span v-for="(item,index) in  SelectData.tools " :key="index" @click="Toolstest(item)">{{item}}</span></p>  <!--  器材 -->
        <p class="Part" v-show="Part"><span v-for="(item,index) in SelectData.body" :key="index" @click="Partclicktext(item)">{{item}}</span></p>        <!--  部位 -->
        <p class="level" v-show="level"><span v-for="(item,index) in SelectData.level" :key="index" @click="levelclicktest(item)">{{item}}</span></p>     <!--  难度 -->
    </div>
</template>

<script>
export default {
    name:"Selects",
    data(){
        return{
            SelectData:{},
            equipment:false, // 器材状态
            Part:false,       //部位状态
            level:false,        //难度状态
            leveltest:"简易难度",
            equipmenttest:"不限器材",
            Parttest:"不限部位"
        }
    },
    mounted(){
        this.$axios.get(this.HOST + "http://localhost:3000/burning/classes")
        .then(res => {
            this.SelectData = res.data.tab_info
        })
        .catch(error => {
            console.log(error)
        })
    },
    methods:{
        Toolstest(value){   //不限器材点击切换
            this.equipmenttest = value
            this.equipment = false
        },
        Partclicktext(value){    //部位点击切换
           this.Parttest = value
           this.Part = false
           
        },
        levelclicktest(value){     //难度点击切换
            this.leveltest = value
            this.level = false

        },
        EquClick(event){   //难度事件
          if (!this.level) {
                    this.level = true;
                }else if(this.level){
                    this.level = false;
                }
        },
        PratClick(event){    //器材事件
            if (!this.equipment) {
                    this.equipment = true;
                }else if(this.equipment){
                    this.equipment = false;
                }
        },
        LevelClick(event){   //部位事件
             if (!this.Part) {
                    this.Part = true;
                }else if(this.Part){
                    this.Part = false;
                }
        },

    }
}

 
</script>

<style lang="less">
.select_box{
    .equipment{   // 器材样式
        width: 100%;
        background: #fff;
        z-index: 666;
        position: absolute;
        height: 60px;
        span{
            font-size: 0.3rem;
            width: 30%;
            height:30px;
            border-radius: 20px;
            border: 1px solid #666;
            display: block;
            text-align: center;
            line-height: 30px;
            float: left;
            margin-top: 15px;
            margin-left: 12%;
        }
    }
    .Part{        //部位样式
        width: 100%;
        background: #fff;
        z-index: 666;
        position: absolute;
        height: 150px;
        span{
            font-size: 0.3rem;
            width: 30%;
            height:30px;
            border-radius: 20px;
            border: 1px solid #666;
            display: block;
            text-align: center;
            line-height: 30px;
            float: left;
            margin-top: 15px;
            margin-left: 12%;
        }
    }
    .level{      //难度样式
        width: 100%;
        background: #fff;
        z-index: 666;
        height: 100px;
        position: absolute;
          span{
            font-size: 0.3rem;
            width: 30%;
            height:30px;
            border-radius: 20px;
            border: 1px solid #666;
            display: block;
            text-align: center;
            line-height: 30px;
            float: left;
            margin-top: 15px;
            margin-left: 12%;
        }
    }
}
.container{
    width: 100%;
    background: rgba(239,239,239);
    height: 45px;
    div{
        width: 33.33%;
        float: left;
        font-size: 0.3rem;
        height: 45px;
        text-align: center;
        line-height: 45px;
    }
        p{
            width: 100%;
            background: #fff;
            position: absolute;
            span{
                font-size: 0.3rem;
            }
        }
}



</style>
